<template>
    <div class="border">
        <div style="padding: 20px;font-size: 24px">{{cName}}</div>
        <el-table
                border
                :data="studentslist"
                stripe
                style="width: 95%; margin: 20px"
        >
            <el-table-column prop="sId" label="学号" ></el-table-column>
            <el-table-column prop="sName" label="学生名" ></el-table-column>
            <el-table-column prop="score" label="学生成绩"></el-table-column>
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >修改成绩
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-button style="margin-left: 1080px" @click="addstudent" type="primary">添加学生</el-button>
        <el-dialog title="添加学生" v-model="dialogFormVisible">
            <el-form   :model="form">
                <el-form-item
                        label="学号"
                        prop="sId"
                        :rules="[
      { required: true, message: '学号不能为空'},
      { type: 'number', message: '学号必须为数字值'}
    ]"
                >
                    <el-input type="sId" v-model.number="form.sId" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addclassbystu">确 定</el-button>
    </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import { getClassByid, getScore2} from "../network/class";
    import {addgrade, addScore} from "../network/student";

    export default {
        created() {
            this.getlist()
            if(this.classId!=''){
                getClassByid(this.classId).then((res)=>{
                    this.cName = res.data.courses[0].cName
                })
            }
        },
        computed: {
            ...mapState(['classId'])
        },
        name: "classdetails",
        data(){
            return{
                studentslist:[],
                cName:'',
                sort:'0',
                score:'',
                sId:'',
                dialogFormVisible:false,
                form: {
                    sId:'',
                    age: ''
                },
            }
        },
        methods:{
            addclassbystu(){
                this.dialogFormVisible=false
                addgrade(this.form.sId,this.classId).then((res)=>{
                    console.log(res);
                    if (res.data!=''){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.getlist()
                    }else {
                        this.$notify.error({
                            title: '添加失败',
                            message: '请正确输入学号或该学生已加入课程'
                        });
                    }
                })
            },
            addstudent(){
                this.dialogFormVisible=true
            },
            handleEdit(i){
                this.$prompt('请输入成绩', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^((\d{1,2})|(1[0-4]\d)|(150))$/,
                    inputErrorMessage: '成绩输入只能0-150'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: "修改成功"
                    });
                    this.score = value
                    this.sId=this.studentslist[i].sId
                    addScore(this.sId,this.classId,this.score).then(()=>{
                        this.getlist()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            getlist(){
                getScore2(this.classId,this.sort).then((res)=>{
                    console.log(res);
                    this.studentslist=res.data
                })
            }
        }
    }
</script>

<style scoped>
.border{
    width: 1220px;
    height: 600px;
    background-color: white;
}
</style>
